import { lazy, Suspense } from 'react'
import { createBrowserRouter } from 'react-router-dom'
import RequireAuth from './RequireAuth'

// 懒加载组件，添加错误边界和加载状态
const Login = lazy(() => import('../page/login/Index'))
const MySelf = lazy(() => import('../page/mySelf'))
const App = lazy(() => import('../App'))
const Look = lazy(() => import('../page/look/Index'))
const Home = lazy(() => import('../page/home/Index'))
const GiteeCallback = lazy(() => import('../pages/auth/GiteeCallback'))
const Register = lazy(() => import('../page/register/Index'))
const VoiceTest = lazy(() => import('../page/voiceTest'))

// 加载组件
const LoadingFallback = () => (
    <div style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        fontSize: '18px',
        color: '#666'
    }}>
        加载中...
    </div>
)

// 错误边界组件
const ErrorFallback = ({ error }: { error: Error }) => (
    <div style={{
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        height: '100vh',
        padding: '20px',
        textAlign: 'center'
    }}>
        <h2 style={{ color: '#ff4d4f', marginBottom: '16px' }}>页面加载失败</h2>
        <p style={{ color: '#666', marginBottom: '16px' }}>{error.message}</p>
        <button
            onClick={() => window.location.reload()}
            style={{
                padding: '8px 16px',
                backgroundColor: '#1890ff',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer'
            }}
        >
            重新加载
        </button>
    </div>
)

export const routes = [
    {
        path: '/login',
        element: (
            <Suspense fallback={<LoadingFallback />}>
                <Login />
            </Suspense>
        )
    },
    {
        path: '/auth/gitee/callback',
        element: (
            <Suspense fallback={<LoadingFallback />}>
                <GiteeCallback />
            </Suspense>
        )
    }
]


const router = createBrowserRouter([
    {
        path: '/',
        element: (
            <Suspense fallback={<LoadingFallback />}>
                <App />
            </Suspense>
        ),
        children: [
            ...routes,
            {
                element: <RequireAuth />,
                children: [
                    {
                        path: '/mySelf',
                        element: (
                            <Suspense fallback={<LoadingFallback />}>
                                <MySelf />
                            </Suspense>
                        )
                    },
                    {
                        path: '/look',
                        element: (
                            <Suspense fallback={<LoadingFallback />}>
                                <Look />
                            </Suspense>
                        )
                    },
                    {
                        path: '/home',
                        element: (
                            <Suspense fallback={<LoadingFallback />}>
                                <Home />
                            </Suspense>
                        )
                    },
                    {
                        path: '/register',
                        element: (
                            <Suspense fallback={<LoadingFallback />}>
                                <Register />
                            </Suspense>
                        )
                    },
                    {
                        path: '/voice-test',
                        element: (
                            <Suspense fallback={<LoadingFallback />}>
                                <VoiceTest />
                            </Suspense>
                        )
                    }
                ]
            }
        ]
    },
])
export default router